<template>
  <div class="comment-container">
    <h2 class="comment-title">用户留言</h2>
    <ul class="comment-list">
      <CommentItem
        v-for="comment in comments"
        :key="comment.time"
        :comment="comment"
        @delete="handleDeleteComment"
        @edit="handleEditComment"
        class="comment-item"
      />
    </ul>
    <CommentForm
      @new-comment="addComment"
      class="comment-form"
    />
  </div>
</template>

<script>
import CommentItem from './CommentItem.vue';
import CommentForm from './CommentForm.vue';
import {addBoard, delBoard, listBoard, updateBoard} from "@/api/airline/board";

export default {
  components: {
    CommentItem,
    CommentForm
  },
  data() {
    return {
      comments: [] // 初始为空数组，你可以从后端获取数据填充
    }
  },
  created() {
    this.selectComment();
  },
  methods: {
    /// 查
    selectComment(){
      listBoard().then(response => {
        this.comments = response.rows;
      })
    },
    // 增
    addComment(newComment) {
      addBoard(newComment)
      // 添加评论的逻辑
      this.comments.push(newComment);
      console.log(this.comments);
    },
    handleDeleteComment(time) {
      // 删除评论的逻辑
      let a = []
      a.push(time.id)
      delBoard(a)
      this.comments = this.comments.filter(c => c.time !== time);

      console.log(this.comments);
    },
    handleEditComment(editForm) {
      updateBoard(editForm)
      console.log(editForm);
      // 通过修改的表单的id替换元数据
      this.comments = this.comments.map(c =>  c.time === editForm.time ? editForm : c);
      console.log(this.comments);
    }
  }
}
</script>

<style scoped>
.comment-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.comment-title {
  text-align: center;
  margin-bottom: 20px;
}

.comment-list {
  list-style-type: none;
  padding-left: 0;
}

.comment-item {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.comment-form {
  margin-top: 20px;
}

/* 你还可以在这里添加CommentForm和CommentItem的特定样式 */
</style>
